<template>
	<div>
		<div class="text-xl">【热门文章信息】</div>
		<div ref="target" class="w-full h-full">
      <el-table ref="table1" :data="tableData" style="width: 100%; height: 93%; --el-table-border-color: none;border-right: 1px #143275 solid;border-left: 1px #143275 solid;border-bottom: 1px #143275 solid;"
      :highlight-current-row="false"
      :header-cell-style="{ backgroundColor: '#143275', color: '#fff', textAlign: 'center'}"
      :cell-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', }"
      :row-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', height: '55px' }"
      :row-class-name="tableRowClassName"
      >
        <el-table-column prop="categoryName" label="所属分类" width="100" />
        <el-table-column prop="title" label="文章标题" width="230" />
        <el-table-column prop="readNum" label="浏览量" width="70" />
        <el-table-column prop="createTime" label="发布时间" width="140" />
      </el-table>
    </div>
	</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getVisArticleList } from '@/api/admin/article'


const tableData = ref([])

// const tableData = [
//   {
//     category: 'Java',
//     title: '如何学习Java',
//     readNum: '183',
//     createTime: '2024-03-07',
//   },{
//     category: '前端',
//     title: 'Vue2 + Vue3',
//     readNum: '166',
//     createTime: '2024-03-10',
//   },{
//     category: '运维',
//     title: '自动化Jenkins',
//     readNum: '132',
//     createTime: '2024-03-03',
//   },{
//     category: '网络',
//     title: '华为ICT大赛经验分享',
//     readNum: '75',
//     createTime: '2024-03-28',
//   },
//   {
//     category: 'Java',
//     title: '如何学习Java',
//     readNum: '183',
//     createTime: '2024-03-07',
//   },{
//     category: '前端',
//     title: 'Vue2 + Vue3',
//     readNum: '166',
//     createTime: '2024-03-10',
//   },{
//     category: '运维',
//     title: '自动化Jenkins',
//     readNum: '132',
//     createTime: '2024-03-03',
//   },{
//     category: '网络',
//     title: '华为ICT大赛经验分享',
//     readNum: '75',
//     createTime: '2024-03-28',
//   },
  
// ]


// 表格隔行变色

const getArticleList = async () => {
  const res = await getVisArticleList()
  if (res.success) {
    tableData.value = res.data
  }
}

getArticleList()

function tableRowClassName({ row, rowIndex }) {
  if (rowIndex % 2 === 0) {
    return ''
  } else  {
    return 'success-row' //这是类名
  }
}


const table1 = ref();
onMounted(() => {
  scroll(table1.value.$refs.bodyWrapper);//设置滚动
});



</script>
<script>
//scroll方法不用对外，所以放在<script>里了
const scroll = (tableBody) => {
  let isScroll = true;

  const dom1 = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];

  //鼠标放上去，停止滚动；移开，继续滚动
  dom1.addEventListener("mouseover", () => {
    isScroll = false;
  });
  dom1.addEventListener("mouseout", () => {
    isScroll = true;
  });

  setInterval(() => {
    if (isScroll) {
      dom1.scrollTop += 1;
      // console.log(dom1.scrollTop);
      // console.log(dom1.offsetHeight);
      // console.log(dom1.clientHeight);
      if(dom1.scrollTop - 135.5 == dom1.clientHeight) {
        dom1.scrollTop = 0;
      }
      // if (dom1.clientHeight + dom1.scrollTop == dom1.scrollHeight) {
      //   dom1.scrollTop = 0;
      // }
    }
  }, 100);
};


</script>
<style scoped>
/*  
// 表格部分样式
 // 最外层透明 */
 ::v-deep(.el-table),
::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: #93dcfe;
  font-size: 24px;
}
 
/* 表格内背景颜色  */
::v-deep(.el-table th),
::v-deep(.el-table tr),
::v-deep(.el-table td) {
  background-color: transparent;
  border: 0px;
  color: #93dcfe;
  font-size: 24px;
  height: 5px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
 
/* // 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}
 

/* // 修改高亮当前行颜色 */
::v-deep(.el-table tbody tr:hover>td) {
  background: #063570 !important;
}
 
/* // 取消当前行高亮 */
::v-deep(.el-table tbody tr) {
  pointer-events: none;
}
 
/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */
 
/* // 表格斑马自定义颜色 */
::v-deep(.el-table__row.warning-row) {
  background: #01205A;
}
 

 
/* 去掉表格里的padding */
::v-deep(.el-table .cell),
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
<style>
.success-row {
  background-color:#042b4c !important; 
}
</style>